import { Routes, Route } from 'react-router-dom'
import { AuthComponent } from '@/components/AuthComponent'
import { HistoryRouter, history } from '@/utils/history'
import '@/App.css'
// 路由懒加载部分：导入必要组件
import { lazy, Suspense } from 'react'
// 按需导入路由组件
const Layout = lazy(() => import('@/pages/Layout'))
const Login = lazy(() => import('@/pages/Login'))
const Home = lazy(() => import('@/pages/Home'))
const Publish = lazy(() => import('@/pages/Publish'))
const Article = lazy(() => import('@/pages/Article'))
function App () {
  return (
    <HistoryRouter history={history}>
      <div className="App">
        <Suspense
          fallback={
            <div
              style={{
                textAlign: 'center',
                marginTop: 200
              }}
            >
              loading...
            </div>
          }
        >
          <Routes>
            {/* layout需要做鉴权(是否登录) */}
            <Route path='/' element={
              <AuthComponent><Layout /></AuthComponent>
            }>
              <Route index element={<Home />}></Route>
              <Route path='article' element={<Article />}></Route>
              <Route path='publish' element={<Publish />}></Route>
            </Route>
            <Route path='/login' element={<Login />}></Route>
          </Routes>
        </Suspense>
      </div>
    </HistoryRouter>
  )
}

export default App
